import React, { useState } from 'react';
import { API_CONFIG } from './config';
import { ChainInfoSection } from './components/ChainInfoSection';
import { NodeInfoSection } from './components/NodeInfoSection';
import { TransactionSection } from './components/TransactionSection';
import { DBSection } from './components/DBSection';
import { DIDSection } from './components/DIDSection';

function App() {
  const [selectedNode, setSelectedNode] = useState<keyof typeof API_CONFIG.NODES>('REGULATOR');

  return (
    <div className="App min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-6">
        <div className="container mx-auto">
          <h1 className="text-3xl font-bold">RepChain 区块链管理系统</h1>
          <p className="mt-2">RepChain Blockchain Management System</p>
        </div>
      </header>

      <main className="container mx-auto p-6">
        {/* Node Selection */}
        <div className="mb-6">
          <label htmlFor="node-select" className="block text-sm font-medium text-gray-700 mb-2">
            选择节点 (Select Node):
          </label>
          <select
            id="node-select"
            value={selectedNode}
            onChange={(e) => setSelectedNode(e.target.value as keyof typeof API_CONFIG.NODES)}
            className="block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            aria-label="选择要管理的节点"
          >
            {Object.keys(API_CONFIG.NODES).map((node) => (
              <option key={node} value={node}>
                {API_CONFIG.NODES[node as keyof typeof API_CONFIG.NODES].NAME}
              </option>
            ))}
          </select>
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Left Column */}
          <div className="space-y-6">
            <ChainInfoSection node={selectedNode} />
            <NodeInfoSection node={selectedNode} />
            <DBSection node={selectedNode} />
          </div>

          {/* Right Column */}
          <div className="space-y-6">
            <TransactionSection node={selectedNode} />
            <DIDSection node={selectedNode} />
          </div>
        </div>
      </main>

      <footer className="bg-gray-800 text-white p-4 mt-8">
        <div className="container mx-auto text-center">
          <p>&copy; 2024 RepChain Management System. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

export default App; 